首页需求分析与基本 UI 结构搭建
本节对照设计稿，分析知识付费小程序首页的页面结构，使用 uview-plus 组件和 CSS 框架搭建基础 UI 骨架。重点在于页面区域的划分和基础组件的选型，而非逐像素还原设计稿。
首页结构分析
从上到下，首页可以划分为以下区域：
┌─────────────────────────┐
│ 搜索框（u-search） │
├─────────────────────────┤
│ 轮播图（u-swiper） │
├─────────────────────────┤
│ 三按钮导航（u-grid） │
├─────────────────────────┤
│ 公告栏 │
├─────────────────────────┤
│ 为你推荐（横向滚动） │
├─────────────────────────┤
│ 精品微课（列表） │
├─────────────────────────┤
│ 学习计划（四宫格） │
├─────────────────────────┤
│ 订阅专栏（列表） │
├─────────────────────────┤
│ 大家都在学（宫格） │
└─────────────────────────┘
text
搜索框组件
使用 uview-plus 的 u-search 组件：
<template>
<u-search
v-model="searchText"
placeholder="请输入关键字"
:showAction="false"
/>
</template>
<script setup>
import { ref } from 'vue'
const searchText = ref('')
</script>
vue
关键配置：showAction 设为 false 隐藏右侧"搜索"按钮，保持搜索框简洁。
轮播图组件
使用 uview-plus 的 u-swiper 卡片式轮播：
<template>
<u-swiper :list="bannerList" indicatorMode="dot" />
</template>
<script setup>
import { ref } from 'vue'
const bannerList = ref([
{ image: 'https://xxx/banner1.png' },
{ image: 'https://xxx/banner2.png' },
{ image: 'https://xxx/banner3.png' }
])
</script>
vue
轮播图数据通常从云数据库的 openDB-banner 表中读取，图片存储在云存储中。
三按钮导航
使用 u-grid 宫格布局：
<template>
<u-grid :col="3" :border="false">
<u-grid-item v-for="(item, index) in gridButtons" :key="index">
<image :src="item.icon" style="width:80rpx;height:100rpx" />
<text>{{ item.name }}</text>
</u-grid-item>
</u-grid>
</template>
<script setup>
import { ref } from 'vue'
const gridButtons = ref([
{ icon: '/static/icons/2.png', name: '学习计划' },
{ icon: '/static/icons/3.png', name: '订阅专栏' },
{ icon: '/static/icons/4.png', name: '精品微课' }
])
</script>
vue
图标资源放在 static/icons/ 目录下，可在课程资料文件夹中下载。
公告栏
公告栏使用 flex 布局实现：
<template>
<view class="flex justify-between items-center">
<view class="flex items-center">
<image src="/static/icons/play.png" style="width:40rpx;height:40rpx" />
<text>每日一刻</text>
<text class="text-gray-500">美丽课详情介绍</text>
</view>
<view class="flex items-center">
<text class="text-gray-400 text-sm">查看更多</text>
<up-icon name="play-right-fill" size="12" color="#999" />
</view>
</view>
</template>
vue
uview-plus 内置了 play-right-fill 图标（向右箭头），可直接使用 <up-icon> 组件。
组件封装思路
在实现首页过程中，可以识别出以下可复用的基础组件：
| 组件名 | 说明 | 使用场景 |
|---|---|---|
vp-card | 带标题的卡片容器 | 为你推荐、精品微课等区域 |
vp-item | 课程/内容缩略图卡片 | 推荐列表、宫格展示 |
vp-course-item | 课程信息卡片 | 精品微课、订阅专栏 |
vp-card 组件（初步）
<template>
<view>
<view class="flex justify-between items-center p-x-4">
<text class="font-bold text-xl">{{ title }}</text>
<slot name="extra" />
</view>
<view :class="wrapClass">
<slot />
</view>
</view>
</template>
<script setup>
defineProps({
title: { type: String, default: '' },
wrapClass: { type: String, default: 'p-4' }
})
</script>
vue
通过 wrapClass prop 可以控制卡片内容的内边距，不同区域可以传入不同的值（如 p-x-2 或 p-4）。
静态资源说明
课程提供的静态资源包括：
static/icons/— 导航图标（PNG 格式）static/images/— 默认头像、占位图等- PSD 设计稿 — 课程资料文件夹中下载
页面间差异注意
小程序页面与纯 View 类型应用的差异主要体现在：
- 页面跳转：使用
uni.navigateTo而非路由库 - 页面传参：通过 URL query 或全局状态
- 生命周期：使用
onLoad、onShow等小程序生命周期 - 导航栏：需配置
navigationStyle控制是否使用自定义导航
↑